import React, { Component } from 'react';

import { List, InputItem, Button, WhiteSpace, WingBlank } from 'antd-mobile';
// import { createForm } from 'rc-form';

import { withRouter } from 'react-router-dom'
import { Loginlist } from './style'


import { get } from '@/api/net'
import config from '@/config/uri'
import Storage from '@/utils/storage'


@withRouter
class Info extends Component {

    state = {
        username: '',
        password: ''
      }

    //  组件挂载 自动聚焦
    componentDidMount() {
        // this.autoFocusInst.focus();
    }

    //  手动聚焦
    handleClick = () => {
        this.inputRef.focus();
    }

    
  async login() {
    let ret = await get(config.login)
    if (ret.data.code === 0) {
        console.log(ret);
      // 写入到storeage中
      Storage.set('islogin',this.state.username)
    //   this.props.history.push('/center')
    this.props.history.push('/')
    // event.preventDefault();
    }
  }

    render() {
        // console.log(this.props);
        // const { getFieldProps } = this.props.form;

        return (
            <Loginlist>
                <List renderHeader={() => '用户信息登录'}>
                    <InputItem
                      type="text"
                      value={this.state.username} 

                      onChange={evt => this.setState({ username:evt })}
                    //   onChange={evt => console.log(evt)}
                        // {...getFieldProps('autofocus')}
                        // clear
                        placeholder="你的名字"
                        // ref={el => this.autoFocusInst = el}
                    >用户:</InputItem>
                    <InputItem
                        // {...getFieldProps('focus')}
                        clear
                        placeholder=" 你的密码"
                        type="password"
                        ref={el => this.inputRef = el}
                    >密码:</InputItem>

                    <InputItem
                        // {...getFieldProps('password')}
                        type="password"
                        placeholder="****"
                    > 确认密码</InputItem>


                    <InputItem
                        // {...getFieldProps('phone')}
                        type="phone"
                        placeholder="186 1234 1234"
                    >手机号码</InputItem>





                    <List.Item>
                        <div
                            style={{ width: '100%', color: '#108ee9', textAlign: 'center' }}
                            onClick={this.handleClick}
                        >
                            手动聚焦密码框
                        </div>
                    </List.Item>

                    <Button type="primary"
                      onClick={this.login.bind(this)
                    }
                    >登录</Button>

                </List>

            </Loginlist>
        );
    }
}

export default Info;
